<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-22 09:25:50
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback hasbtn title="交通">
    <b-button :param="handlerParam" @handler="handler"></b-button>
    <mx-date-picker :show.sync="showPicker" type="date" :value="form.dateline" :show-tips="true" :begin-text="'开始日期'"
      :end-text="'结束日期'" :show-seconds="false" color="#6ABE83" @confirm.self="formChange($event, 'dateline')"
      @cancel.self="formChange($event, 'dateline')" />
    <popup-time :show.sync="timePopup" @confirm.self="formChange($event, 'time')" :option="MDTime"></popup-time>
    <popup-select :show.sync="selectPopup" @confirm.self="formChange($event, 'type')"
      :option="trafficOptions"></popup-select>
    <popup-person :show.sync="personPopup" pKey="id" multiple @confirm.self="formChange($event, 'person')"
      :option="personOptions"></popup-person>
    <view class="form">
      <view class="single" v-for="v in option" :key="v.id">
        <input v-if="v.type == 'input'" class="input" :placeholder="v.placeholder" placeholder-class="formPlaceholader"
          v-model="form[v.key]">
        <view @click="todo(v.type)" v-else class="txt" :class="{ 'placeholder': form[v.key] === '' }">{{
          covert(v.key) || v.placeholder }}</view>
      </view>
    </view>
  </l-page>
</template>

<script>
import bButton from "@/components/button/button";
import MxDatePicker from "@/components/time/mx-datepicker.vue";
import popupTime from "@/components/popup/popup-time";
import popupSelect from "@/components/popup/popup-select";
import popupPerson from "@/components/popup/popup-person";
export default {
  name: "traffic",
  components: { bButton, MxDatePicker, popupTime, popupSelect, popupPerson },
  data() {
    return {
      handlerParam: {
        type: "single",
        position: "fixed",
        list: [
          {
            title: "保存",
            bgcolor: "#6ABE83",
            color: "#ffffff",
          },
        ],
      },
      showPicker: false,
      timePopup: false,
      selectPopup: false,
      personPopup: false,
      trafficOptions: [
        { id: 0, title: '步行' },
        { id: 1, title: '大巴' },
        { id: 2, title: '高铁' },
        { id: 3, title: '飞机' },
        { id: 4, title: '其他' },
      ],
      personOptions: [
        { id: 0, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 1, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 2, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 3, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 4, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 5, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 6, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 7, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 8, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 9, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 10, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 11, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 12, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 13, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
        { id: 14, username: '玛卡巴卡', gender: '女', age: 24, moblie: '12345678910' },
      ],
      option: [{ id: 0, placeholder: '请选择日期', key: 'dateline', type: 'day' },
      { id: 1, placeholder: '请选择时间', key: 'time', type: 'time' },
      { id: 2, placeholder: '请选择交通方式', key: 'type', type: 'select' },
      { id: 3, placeholder: '请添加成员', key: 'person', type: 'person' },
      { id: 4, placeholder: '请填写费用/人均', key: 'cost', type: 'input' }],
      form: {
        dateline: '',
        time: '',
        type: '',
        person: '',
        cost: ''
      }
    };
  },
  computed: {
    covert() {
      return (key) => {
        let txt;
        switch (key) {
          case 'dateline':
            txt = this.form[key].replace(/-/g, '.');
            break;
          case 'type':
            txt = this.trafficOptions.find(v => v.id === this.form.type)?.title;
            break;
          case 'person':
            const arr = [];
            this.personOptions.map(v => v.checked && arr.push(v.username));
            txt = arr.join(',');
            break;
          default:
            txt = this.form[key];
            break;
        }
        return txt;
      }
    },
    MDTime() {
      const hours = Array.from({ length: 24 }, (value, index) => `${index < 10 ? '0' + index : index}时`);
      const minutes = Array.from({ length: 60 }, (value, index) => `${index < 10 ? '0' + index : index}分`);
      return [hours, minutes];
    }
  },
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    todo(type) {
      const pickerMap = {
        day: () => {
          this.showPicker = true;
        },
        time: () => {
          this.timePopup = true;
        },
        select: () => {
          this.selectPopup = true;
        },
        person: () => {
          this.personPopup = true;
        }
      };
      type in pickerMap && pickerMap[type]();
    },
    formChange(v, key) {
      if (key == 'dateline') {
        this.showPicker = false;
        if (v.date) this.form.dateline = v.date.format("Y-m-d");
      } else if (key == 'person') {
        this.personOptions.map(a => a.checked = v.value.some(b => b.id == a.id));
        this.form.person = v.value.map(a => { return a.id }).join(',');
      }
      else {
        this.form[key] = v.value;
      }
    },
    handler() {
      console.log(this.form);
    },
  },
};
</script>
<style lang="less" scoped>
.form {
  padding: 20upx;
  background-color: #F5F5F5;

  .single {
    .flex(row, flex-start);
    padding: 32upx 20upx;
    margin-bottom: 20upx;
    width: 100%;
    background: #FFFFFF;
    border-radius: 8upx;

    .txt {
      .flex(row, flex-start);
      width: 100%;
      height: 100%;
      font-size: 28upx;
      line-height: 36upx;
      color: #333333;
    }

    .placeholder {
      color: #AAAAAA;
    }
  }
}

/deep/ .input,
/deep/ picker,
.time {
  width: 100%;
  height: 100%;
  font-size: 28upx;
  color: #333333;
}

/deep/ .formPlaceholader {
  font-size: 28upx !important;
  color: #AAAAAA !important;
}
</style>